ピクセル化 (Pixelating effect)

実際のピクセル数よりも少ない点の色をサンプリングすることで、ピクセル化のエフェクトを実現できます。

スケッチのソースコードを見てみましょう：

let pixelateShader;

function pixelateCallback() {
  const pixelCountX = uniformFloat(() => 80);

  getColor((inputs, canvasContent) => {
    const aspectRatio = inputs.canvasSize.x / inputs.canvasSize.y;
    const pixelSize = [pixelCountX, pixelCountX / aspectRatio];

    // サンプリング座標を離散化（カクカクに）します
    const coord = inputs.texCoord;
    const modifiedCoord = floor(coord * pixelSize) / pixelSize;

    const col = getTexture(canvasContent, modifiedCoord);
    return col;
  });
}

async function setup() {
  createCanvas(400, 400, WEBGL);
  pixelDensity(1);
  pixelateShader = baseFilterShader().modify(pixelateCallback);
}

function draw() {
  background(0);
  rotateY(millis() / 2000);
  sphere(90);
  filter(pixelateShader);
}

テクスチャ座標を pixelSize で掛け、floor() で切り捨ててから pixelSize で割ることで、座標を階段状に変化させています。これにより、複数のピクセルが元のテクスチャの同じ場所から色をサンプリングするようになり、正方形の大きな「ピクセル」が表現されます。

const modifiedCoord = floor(coord * pixelSize) / pixelSize;

draw() 関数の最後で filter(pixelateShader) を呼び出すことで、描画されたシーン全体にこの効果が適用されます。